<template>
    <el-dialog title="管理已上传文件" :visible.sync="dialogTableVisible" :show-close="true" :close-on-click-modal="true" :center="true" top="100px" :before-close="beforeClose">
        <div class="dialogVue">
            <div class="box">
                <div class="boxInner flex_between flex_wrap">
                    <div class="boxLi flex-between align_center" v-for="(item,index) in datasetDocumentList" :key="index">
                        <span class="fileName">{{item.docName}}</span>
                        <div class="flex align_center">
                            <span @click="deleteDocument(item.id)">删除</span>
                            <div class="line"></div>
                            <span @click="download(item.url)">下载</span>
                        </div>
                    </div>
                </div> 
                <div style="height: 100%" class="flex_column align_center flex_center" v-if="isEmpty">
                    <img src="../../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 20px">
                    <span style="color: #101010; font-weight: 600; font-size: 18px">当前列表是空哦~</span>
                </div>
            </div>   
        </div>
    </el-dialog>
</template>

<script>
import { toast } from '@/common/tools'
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            debugger: false
        },
        id: {
            type: String,
            default: ""
        }
    },
    data(){
        return {
            datasetDocumentList: [],
            isEmpty: false
        }
    },
    methods: {
        getDatasetDocumentList(){
            this.$post("/front/dataset/datasetDocumentList", {
                datasetId: this.id,
                pageNum: 1,
                pageSize: 1000,
            }).then(res=>{
                console.log(res)
                this.datasetDocumentList = res.data.obj.list
                this.isEmpty = res.data.obj.total===0
            })
        },
        beforeClose(){
            this.$emit("beforeClose")
        },
        deleteDocument(id){
            this.$post("/front/dataset/deleteDocument", {
                id: id
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "删除成功")
                    this.getDatasetDocumentList()
                }
            })
        },
        download(url){
            window.open(url)
        }
    }
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
    width: 800px;
    height: auto;
    border-radius: 10px;
}
:deep(.el-dialog__title) {
    color: #111;
    font-size: 16px;
    font-weight: 600; 
}
:deep(.el-dialog__header) {
    padding: 20px 0 0;
}
:deep(.el-dialog__body) {
    padding: 20px;
}
.dialogVue {
    width: 100%;
    .box {
        width: 100%;
        height: 500px;
        overflow: scroll;
        .boxInner {
            .boxLi {
                width: 370px;
                height: 62px;
                background: #f5f5f5;
                margin-bottom: 20px;
                padding: 0 15px;
                border-radius: 4px;
                .fileName {
                    color: #111;
                    font-size: 12px;
                    font-weight: 600;
                    flex: 1;
                }
                span {
                    color: #81868e;
                    font-size: 12px;
                    cursor: pointer;
                }
                span:hover {
                    color: #0147fd;
                }
                .line {
                    width: 1px;
                    height: 12px;
                    background: #AAA;
                    margin: 0 5px;
                }
            }
        }
    }
    .box::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
    }
}
</style>